<template>
  <view class="finish-button-wrap" :style="buttonWrapStyle" @tap="handleOk">
    <view class="finish-button" :style="finishButtonStyle">
      <slot>完成</slot>
    </view>
  </view>
</template>
<script>
import "./index.scss";
import { FINISH_BUTTON_DEFAULT_BG } from "@/libs/image-url";
export default {
  props: {
    buttonName: { type: String, default: "完成" },
    width: { type: [Number, String], default: 600 },
    backgroundBg: { type: String, default: FINISH_BUTTON_DEFAULT_BG },
    /**是否为禁止状态 */
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    finishButtonStyle() {
      return {
        ...this.buttonWrapStyle,
        backgroundImage: `url("${this.backgroundBg}")`,
        opacity: this.disabled ? "0.5" : "1"
      };
    },
    buttonWrapStyle() {
      const width =
        typeof this.width === "string" ? this.width : `${this.width}rpx`;
      return { width };
    }
  },
  methods: {
    handleOk(e) {
      e.stopPropagation();
      if (this.disabled) return;
      this.$emit("click");
    }
  }
};
</script>
